<template>
	<view style="align-items: center; width:100%;height:80vh; flex;flex-direction: column;border-radius: 8rpx; padding: 12rpx;">
		<view style="width: 100%;" v-for="(u,i) in taskinfodtv">
			<view @longpress="delthisel(i)" v-if="u.type=='text'" style="width: 100%;">
				<textarea 
					@confirm="returnthisinfo()"
					@input="returnthisinfo()" 
					@blur="returnthisinfo()" 
					style="width: 100%;padding: 8rpx;" 
					auto-height placeholder="请输入..." 
					:focus="u.f" 
					:clearable="false" 
					maxlength="10000"
					v-model="taskinfodtv[i].value" />
			</view>
			<view v-if="u.type=='img'" style="width: 100%;">
				<image @longpress="delthisel(i)" :src="taskinfodtv[i]['value']" style="width: 680rpx;margin: auto;" mode="widthFix"></image>
			</view>
			<view v-if="u.type=='video'" style="width: 100%;">
				<video @longpress="delthisel(i)" src="/static/55.mp4" style="width: 680rpx;margin: auto;" controls></video>
			</view>
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 100rpx;">
			<view style="margin:8rpx 24rpx 0rpx 10rpx;">
				<image v-if="showdone" @click="returnthisinfo()" src="./done.png" style="width: 50rpx;height: 50rpx;" mode="widthFix"></image>
			</view>
			
			<view style="display: flex;align-items: center; position: absolute;bottom: 0%; right: 0%;">
				<view style="margin:8rpx 24rpx 0rpx 3rpx;">
					<image @click="addvuetype(0)" src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/clock.png" style="width:  50rpx;height:  50rpx;" mode="widthFix"></image>
				</view>
				<view style="margin:8rpx 24rpx 0rpx 3rpx;">
					<image @click="addvuetype(1)" src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/tupian.png" style="width: 50rpx;height: 50rpx; opacity: 0.6;" mode="widthFix"></image>
				</view>
				<view class="example-body" style="margin:8rpx 24rpx 6rpx 3rpx;">
					<uni-datetime-picker 
						type="date" 
						:clear-icon="false" 
						v-model="single" 
						:border="false"
						@maskClick="maskClick" 
						@change="maskClick" />
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
export default {
	name:'bgyxedit',
	props: {
		taskinfodtv: {
			type: Array,
			default() {
				return [
					{
						type:'text',
						value:'',
						f:false,
					},
				];
			}
		},
		mtype: {
			type: Array,
			default() {
				return ['text','img','video'];
			}
		},
		uploadurl: {
			type: String,
			default: ''
		},
		journalDate:{
			type:String,
			default:''
		},
		showdone: {
			type: Boolean,
			default: false
		},
		filename: {
			type: String,
			default: 'uploadfile'
		},
		handleUpload:{
			type:Function
		}
	},
	data() {
		return {
			date:"",
			single:'',
			htmlinfo:''
		};
	},
	created() {
		const now =new Date()
		// 获取当前日期
		var year = now.getFullYear();
		var month = (now.getMonth() + 1).toString().padStart(2, '0');
		var day = now.getDate().toString().padStart(2, '0')
		this.single = year+"-"+month+"-"+day;
		
		
	},
	updated() {
		if(this.journalDate!=''){
			this.single = this.journalDate
			console.log("修改了")
			this.$emit('bgyxchange', this.returninfo());
		}
	},
	methods: {
		maskClick(e) {
			console.log('maskClick事件:', e);
			this.$emit('bgyxchange', this.returninfo());
		},
		returnthisinfo:function(){
			// console.log(this.taskinfodtv)
			this.$emit('bgyxchange', this.returninfo());
		},
		returninfo:function(){
			// 这里可以自己定制相应的html转换代码
			var that = this
			var infoarr = that.taskinfodtv
			var info = '';
			for(var o in infoarr){
				var arr = infoarr[o]
				if(arr.value){
					if(arr.type == 'text'){
						var newData = arr.value
						newData = newData.replace(/\n/g, '<br/>');
						
						info = info + '<p style="margin:5px auto;font-size:1.5vh;">'+newData+'</p>';
					}
					if(arr.type == 'img'){
						info = info + '<p style="text-align:center;margin:5px auto;"><img style="width:100%;height:auto;margin:auto;" src="'+arr.value+'"></p>';
					}
					if(arr.type == 'video'){
						info = info + '<p style="text-align:center;margin:5px auto;"><video controls="controls" style="width:100%;height:auto;margin:auto;" src="'+arr.value+'"></video></p>';
					}
				}
			}
			if(info){
				info = '<p style="margin:5px auto;">' + info + '</p>'
				return {'html':info,'data':infoarr,'date':this.single};
			}else{
				return {'html':'','data':infoarr,'date':this.single};
			}
		},
		addvuetype:async function(e){
			var that = this
			if(e == 0){
				console.log(this.taskinfodtv)
				// 获取当前时间并格式化为[时:分:秒]的格式
				let now = new Date();
				let hours = now.getHours().toString().padStart(2, '0');
				let minutes = now.getMinutes().toString().padStart(2, '0');
				let seconds = now.getSeconds().toString().padStart(2, '0');
				let formattedTime = `[${hours}:${minutes}:${seconds}]`;
				
				this.taskinfodtv[0].value += formattedTime;
			}
			if(e == 1){
				uni.chooseImage({
					count:1,
				    success: async (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:'上传中...'
						})
						if(that.handleUpload){
							const upimg = await that.handleUpload(tempFilePaths[0])
							that.taskinfodtv.push({type:'img',value:upimg})
							that.$emit('bgyxchange', that.returninfo());
						}else{
							const upimg = tempFilePaths[0]
							that.taskinfodtv.push({type:'img',value:upimg})
							that.$emit('bgyxchange', that.returninfo());
						}
				        uni.hideLoading()
				    }
				});
			}
			if(e == 2){
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: async function (res) {
						console.log(res)
						var vd = res.tempFilePath;
						uni.showLoading({
							title:'上传中...'
						})
						if(that.handleUpload){
							const video = await that.handleUpload(vd)
							that.taskinfodtv.push({type:'video',value:video})
							that.$emit('bgyxchange', that.returninfo());
						}else{
							const video = vd
							that.taskinfodtv.push({type:'video',value:video})
							that.$emit('bgyxchange', that.returninfo());
						}
						uni.hideLoading()
					}
				});
			}
		},
		delthisel:function(i){
			const that = this
			let arr = this.taskinfodtv
			// 这里可以继续扩展 比如 图片大小 文字样式等 小伙伴们自己发挥吧
			uni.showActionSheet({
			    itemList: ['↑上移↑','↓下移↓', '删除'],
			    success: function (res) {
			        var k = res.tapIndex
					console.log(k)
					if(k == 0){
						if(i>0){
							var ls = arr[i]
							arr[i] = arr[i-1]
							arr[i-1] = ls
							that.taskinfodtv = []
							for(var o in arr){
								that.taskinfodtv.push(arr[o])
							}
							that.$emit('bgyxchange', that.returninfo());
							console.log(that.taskinfodtv)
						}
					}
					if(k==1){
						if(i<(arr.length-1)){
							var ls = arr[i]
							arr[i] = arr[i+1]
							arr[i+1] = ls
							that.taskinfodtv = []
							for(var o in arr){
								that.taskinfodtv.push(arr[o])
							}
							that.$emit('bgyxchange', that.returninfo());
							console.log(that.taskinfodtv)
						}
					}
					if(k==2){
						that.taskinfodtv.splice(i,1)
						that.$emit('bgyxchange', that.returninfo());
						console.log(that.taskinfodtv)
					}
			    },
			    fail: function (res) {
			        console.log(res.errMsg);
			    }
			});
			
			
		}
	}
};
</script>
